<template>
	<view class="content">
		<!-- 分类左侧 -->
		<scroll-view scroll-y class="left-aside">
			<view :class="['f-item', { 'active': index == leftindex}]" @click="leftTap(index)"
				v-for="(item, index) in cateLeft">{{ item.name }}</view>
		</scroll-view>
		<!-- 分类右侧 -->
		<scroll-view scroll-with-animation scroll-y class="right-aside">
			<view class="s-list" v-for="(item, index) in cateLeft" v-show="index == leftindex">
				<view class="t-list">
					<view class="t-item" v-for="(item, index) in lists" @click="skipProduct" :data-id="item._id">
						<image :src="item.img"></image>
						<text class="s-item">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			requt: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			headerActive: false,
			cateLeft: [], //左侧菜单
			cateRight: [], //右侧菜单
			leftindex: 0, //左侧索引0
			lists: [],	 //右侧对应数据
		};
	},
	onLoad(options) {
		this.cateList();
		if(options.index) this.leftindex=options.index
	},
	methods: {
		// 分类接口
		cateList() {
			uni.request({
				url: this.requt + '/api/get_cate',
				success: res => {
					console.log(res.data.data);
					this.cateLeft = res.data.data;
					this.lists = this.cateLeft[this.leftindex].children
					this.cateRight = res.data.data.children;
				},
			});
		},
		/* 左侧导航点击 */
		leftTap(index) {
			this.leftindex = index;
			this.lists = this.cateLeft[index].children
		},
		/* 点击进入商品列表*/
		skipProduct(e) {
			console.log(e);
			let cate_id = e.currentTarget.dataset.id
			uni.navigateTo({
				url: `/pages/product/list?cate_id=${cate_id}`
			})
		}
	}
};
</script>
<style lang='scss'>
page,
.content {
	height: 100%;
	background-color: #f8f8f8;
}

.content {
	display: flex;
}

.left-aside {
	flex-shrink: 0;
	width: 200upx;
	height: 100%;
	background-color: #fff;
}

.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100upx;
	font-size: 28upx;
	color: $font-color-base;
	position: relative;

	&.active {
		color: $base-color;
		background: #f8f8f8;

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 36upx;
			width: 8upx;
			background-color: $base-color;
			border-radius: 0 4px 4px 0;
			opacity: .8;
		}
	}
}

.right-aside {
	flex: 1;
	overflow: hidden;
	padding-left: 20upx;
}

.s-item {
	display: flex;
	align-items: center;
	height: 70upx;
	padding-top: 8upx;
	font-size: 28upx;
	color: $font-color-dark;
}

.t-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	background: #fff;
	padding-top: 12upx;

	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}

.t-item {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 176upx;
	font-size: 26upx;
	color: #666;
	padding-bottom: 20upx;

	image {
		width: 140upx;
		height: 140upx;
	}
}
</style>
